/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="patternPanel">
    <el-table
      highlight-current-row
      ref="patternTable"
      class="patternTable"
      :data="patternTableData"
      :max-height="maxHeight"
      style="width: 100%">
      <el-table-column
        type="index"
        label="#"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        min-width="260"
        :label="$t('openatc.greenwaveoptimize.nameOrDistance')"
        align="center">
        <template  slot-scope="scope">
          <div class="nameContainer">
            <div class="inpput-container">
              <el-input-number  v-show="scope.$index > 0" :controls="false" :min="0" v-model="scope.row.distance" size="small" style="width: 60%;overflow: hidden;"></el-input-number>
            </div>
            <div class="top-line">
              <div class="line" v-show="scope.$index > 0"></div>
            </div>
            <div class="circle-name">
              <div class="circle"></div>
              <div class="name">{{scope.row.name}}</div>
            </div>
            <div class="bottom-line">
              <div class="line" v-show="scope.$index < patternTableData.length - 1"></div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="nextDistance"
        :label="$t('openatc.greenwaveoptimize.widthmeter')"
        width="90"
        align="center">
        <template  slot-scope="scope">
          <el-input-number :controls="false" :min="0" v-model="scope.row.width" style="width: 70PX;"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        prop="agentid"
        :label="$t('openatc.devicemanager.crossid')"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="phaseDesc"
        :label="$t('openatc.greenwaveoptimize.forward')"
        width="200"
        align="center">
        <template  slot-scope="scope">
          <div style="display:flex;justify-content:center;">
            <!-- <div style="">
              <xdrdirselector Width="40PX" Height="40PX" :showlist="getShowList(scope.row, bizTypeUp)"></xdrdirselector>
            </div> -->
            <SelectCrossPhase :agentid="scope.row.agentid"
                              :bizType="bizTypeUp"
                              style="width:100%;"
                              :placeholder="getShowPlaceHolder(scope.row, 'up')"
                              @onChange="onSelectCrossPhaseChange"
                              @click.native="onColumClick"></SelectCrossPhase>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('openatc.greenwaveoptimize.back')"
        width="200"
        align="center">
        <template  slot-scope="scope">
          <div>
            <SelectCrossPhase :agentid="scope.row.agentid"
                              :bizType="bizTypeDown"
                              :placeholder="getShowPlaceHolder(scope.row, 'down')"
                              @onChange="onSelectCrossPhaseChange"
                              @click.native="onColumClick"></SelectCrossPhase>
          </div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('openatc.devicemanager.operation')" align="center" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)">{{$t('openatc.common.delete')}}</el-button>
        </template>
      </el-table-column>
  </el-table>
</div>
</template>
<script>
import { getPatternList } from '../../../api/route'
import { getMessageByCode } from '../../../utils/responseMessage'
import { getTheme } from '../../../utils/auth'
import SelectCrossPhase from '../../../components/SelectCrossPhase'
import xdrdirselector from '../../../components/XRDDirSelector'
import { getDirName } from '../../../components/SelectCrossPhase/utils.js'
export default {
  name: 'patterns',
  components: { SelectCrossPhase, xdrdirselector },
  props: {
    patternData: {
      type: Array
    }
  },
  watch: {
    patternData: {
      handler: function (val) {
        let pattern = JSON.parse(JSON.stringify(val))
        for (let i = 0; i < pattern.length; i++) {
          if (pattern[i].patternid !== 0) {
            pattern[i].patterndesc = pattern[i].patterndes === '' ? `${this.$t('openatc.greenwaveoptimize.pattern')}${pattern[i].patternid}` : pattern[i].patterndes
          } else {
            pattern[i].patterndesc = ''
            pattern[i].patternid = 1
          }
        }
        this.patternTableData = pattern
      },
      deep: true
    }
  },
  data () {
    return {
      maxHeight: screen.height < 1080 ? screen.height * 0.48 : screen.height * 0.58,
      bizTypeUp: 'up',
      bizTypeDown: 'down',
      patternTableData: [], // 方案数据
      loading: false
    }
  },
  methods: {
    handleDelete (index, row) {
      this.$emit('deleteDevice', row.agentid)
      this.patternTableData.splice(index, 1)
    },
    getShowList (row, bizType) {
      let res = ''
      let desc = row.forwardphasedirection
      if (!desc) {
        return res
      }
      if (bizType === 'up') {
        desc = row.forwardphasedirection
      } else {
        desc = row.backphasedirection
      }
      let color = getTheme() === 'light' ? '#1E1E1E' : '#F1F3F4'
      let dirArr = []
      for (let rec of desc) {
        let recd = {
          id: rec,
          color: color
        }
        dirArr.push(recd)
      }
      res = dirArr
      return res
    },
    getShowPlaceHolder (row, bizType) {
      let res = ''
      let desc = row.forwardphaseDesc
      if (bizType === 'up') {
        desc = this.formatterForwardphaseDesc(row)
        row.forwardphaseDesc = desc
      } else {
        desc = this.formatterBackphaseDesc(row)
        row.backphaseDesc = desc
      }
      res = desc
      return res
    },
    getDirectionDesc (row, bizType) {
      let res = ''
      let desc = ''
      let phseId = -1
      let directions = []
      if (bizType === 'up') {
        desc = row.forwardphaseDesc
        phseId = row.forwardphaseid
        directions = row.forwardphasedirection
      } else {
        desc = row.backphaseDesc
        phseId = row.backphaseid
        directions = row.backphasedirection
      }
      if (!phseId) {
        return res
      }
      if (!directions) {
        directions = []
      }
      let list = directions.map(id => {
        return {
          id: id
        }
      })
      let dirNames = getDirName(list)
      if (!dirNames) {
        dirNames = []
      }
      let _this = this
      let names = dirNames.map(item => {
        let name = _this.$t(item)
        return name
      })
      desc = names.join(',')
      res = this.$t('openatc.greenwaveoptimize.phase') + phseId + ' ' + desc
      return res
    },
    formatterForwardphaseDesc (row, column) {
      let bizType = 'up'
      let res = this.getDirectionDesc(row, bizType)
      return res
    },
    formatterBackphaseDesc (row, column) {
      let bizType = 'down'
      let res = this.getDirectionDesc(row, bizType)
      return res
    },
    onColumClick () {
      console.log('SelectCrossPhase click')
    },
    onCellClick (row, column, cell, event) {
      console.log(row)
      console.log(column)
      console.log('onCellClick click')
    },
    onSelectCrossPhaseChange (value, option, agentid, bizType) {
      let row = this.patternTableData.filter(dev => dev.agentid === agentid)[0]
      let phasedirection = option.item.map(op => op.id)
      let label = option.label
      if (bizType === 'up') {
        row.forwardphasedirection = phasedirection
        row.forwardphaseid = value
        row.forwardphaseDesc = label
      } else {
        row.backphasedirection = phasedirection
        row.backphaseid = value
        row.backphaseDesc = label
      }
    },
    changeCurPattern (row, curPatternid) {
      // 修改当前方案（allPatterns： 所有可选项）
      const data = {
        agentid: row.agentid,
        patternid: curPatternid,
        patterndes: row.allPatterns.filter(ele => ele.patternid === curPatternid)[0].patterndes,
        allPatterns: row.allPatterns
      }
      this.$emit('changeData', data)
    },
    getCurPattern (agentid) {
      // 获取当前设备所有可选方案
      this.loading = true
      getPatternList(agentid).then(res => {
        this.loading = false
        if (!res.data.success) {
          if (res.data.code === '4003') {
            this.$message.error(this.$t('openatc.common.devicenotonline'))
            return
          }
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.patternData.forEach(ele => {
          if (ele.agentid === agentid) {
            ele.allPatterns = res.data.data.data.patternList.map(ele => {
              return {
                patternid: ele.id,
                patterndes: ele.desc,
                patterndesc: ele.desc === '' ? `${this.$t('openatc.greenwaveoptimize.pattern')}${ele.id}` : ele.desc
              }
            })
          }
        })
      })
    }
  }
}
</script>

<style>
.patternPanel .el-table td, .el-table th {
    padding: 0 0;
    border: none;
}
.patternPanel .el-table .cell {
    line-height: 32PX;
    overflow: visible;
}
</style>

<style lang="scss" scoped>
.patternPanel {
  .nameContainer {
    width: 100%;
    height: 100PX;
    // border: 1PX solid green;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    position: relative;
    top: -15PX;
    .inpput-container {
      width: 100%;
      height: 30PX;
      display: flex;
      justify-content: center;
      align-items: center;
      // border: 1PX solid red;
      // margin-top: 5%;
    }
    .top-line {
      width: 100%;
      height: 25PX;
      display: flex;
      justify-content: center;
      .line {
        width: 1PX;
        height: 25PX;
        background-color: #299BCC;
      }
    }
    .circle-name {
      width: 100%;
      height: 20PX;
      display: flex;
      justify-content: center;
      .circle {
        width: 20PX;
        height: 20PX;
        border-radius: 10PX;
        margin-left: calc(50% - 10PX);
        background: #299BCC;
      }
      .name {
        width: 45%;
        height: 30PX;
        margin-left: 5%;
        // border: 1PX solid #299BCC;
        overflow: hidden;
        font-size: 14PX;
        font-weight: normal;
        font-stretch: normal;
        line-height: 14PX;
        display: flex;
        justify-content: flex-start;
      }
    }
    .bottom-line{
      width: 100%;
      height: 25PX;
      display: flex;
      justify-content: center;
      .line {
        width: 1PX;
        height: 25PX;
        background-color: #299BCC;
      }
    }
  }
}
</style>
